<template>
  <el-main>
    <el-form
      :model="parms"
      ref="seachform"
      label-width="80px"
      :inline="true"
      size="small"
    >
      <el-form-item label="人员姓名">
        <el-input v-model="parms.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchList" icon="el-icon-search">查询</el-button>
        <el-button
          @click="cacelList"
          style="color: #ff7670"
          icon="el-icon-delete"
          >取消</el-button
        >
        <el-button
          @click="addMember"
          type="primary"
          icon="el-icon-plus"
          >新增</el-button
        >
        <el-button
          @click="drMember"
          type="info"
          icon="el-icon-upload2"
          >人员导入</el-button
        >
        <el-button
          @click="dcMember"
          type="warning"
          icon="el-icon-download"
          >人员导出</el-button
        >
      </el-form-item>
      <el-form-item>
      <el-dropdown :hide-on-click="false">
        <el-button type="success">
          展示列<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" >
          <el-scrollbar style="height: 50vh">
                <el-checkbox-group v-model="check">
                  <el-dropdown-item v-for="(item,index) in checkList" :key="index">
                    <el-checkbox :label="item" :key="item"></el-checkbox>
                  </el-dropdown-item>
                </el-checkbox-group>
          </el-scrollbar>
        </el-dropdown-menu>
      </el-dropdown>
      </el-form-item>
    </el-form>


    <el-table :height="tableHeight" :data="memberList" border stripe>
      <el-table-column type="index" :index="1" align="center" label="序号" width="53"></el-table-column>
      <el-table-column v-if="lists[0].ispass" prop="name" align="center" label="姓名" ></el-table-column>
      <el-table-column v-if="lists[1].ispass" prop="sex" align="center" label="性别">
        <template slot-scope="scope">
              <span v-if="scope.row.sex == '0'">男</span>
              <span v-if="scope.row.sex == '1'">女</span>
        </template>
      </el-table-column>
      <el-table-column v-if="lists[2].ispass" prop="deptName" align="center" label="部门"></el-table-column>
      <el-table-column v-if="lists[3].ispass" prop="birthday" align="center" label="出生日期"></el-table-column>
      <el-table-column v-if="lists[4].ispass" prop="memberCategoryName" align="center" label="人员类别"></el-table-column>
      <el-table-column v-if="lists[5].ispass" prop="idNumber" align="center" label="身份证号"></el-table-column>
      <el-table-column v-if="lists[6].ispass" prop="phone" align="center" label="手机号"></el-table-column>
      <el-table-column v-if="lists[7].ispass" prop="graduateSchool" align="center" label="毕业院校"></el-table-column>
      <el-table-column v-if="lists[8].ispass" prop="speciaity" align="center" label="专业"></el-table-column>
      <el-table-column v-if="lists[9].ispass" prop="education" align="center" label="学历"></el-table-column>
      <el-table-column v-if="lists[10].ispass" prop="graduateDate" align="center" label="毕业日期"></el-table-column>
      <el-table-column v-if="lists[11].ispass" prop="technicalTitlesName" align="center" label="技术职称"></el-table-column>
      <el-table-column v-if="lists[12].ispass" prop="currentPositionName" align="center" label="现任岗位"></el-table-column>
      <el-table-column v-if="lists[13].ispass" prop="dutyGrades" align="center" label="职务等级"></el-table-column>
      <el-table-column v-if="lists[14].ispass" prop="entryTime" align="center" label="入职日期"></el-table-column>
      <el-table-column v-if="lists[15].ispass" prop="mountGuardName" align="center" label="上岗形式"></el-table-column>
      <el-table-column v-if="lists[16].ispass" prop="checkIn" align="center" label="是否考勤">
        <template slot-scope="scope">
              <span v-if="scope.row.checkIn == '0'">否</span>
              <span v-if="scope.row.checkIn == '1'">是</span>
        </template>
      </el-table-column>
      <el-table-column v-if="lists[17].ispass" prop="createTime" align="center" label="创建时间"></el-table-column>
      <el-table-column v-if="lists[18].ispass" prop="remark" align="center" label="备注"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="hasPerm('sys:role:edit')"
            icon="el-icon-edit"
            type="text"
            size="small"
            @click="editMember(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-if="hasPerm('sys:role:delete')"
            icon="el-icon-delete"
            type="text"
            size="small"
            @click="deleteMember(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="parms.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="parms.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="parms.total">
    </el-pagination>
    <!-- 新增或编辑弹框 -->
    <sys-dialog
      :title="addDialog.title"
      :height="addDialog.height"
      :width="addDialog.width"
      :visible="addDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="addMemberModule"
          ref="addMemberForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
        >
          <el-form-item prop="name" label="姓名">
            <el-input v-model="addMemberModule.name" placeholder="请填写姓名"></el-input>
          </el-form-item>
          <el-form-item prop="sex" label="性别">
            <el-radio-group v-model="addMemberModule.sex">
              <el-radio :label="'0'">男</el-radio>
              <el-radio :label="'1'">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="dept" label="所属部门" >
            <el-input
              @click.native="selectDept"
              v-model="addMemberModule.deptName" placeholder="请选择所属部门"
            ></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
              style="width:190px"
              v-model="addMemberModule.birthday"
              type="date"
              placeholder="请选择日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          
          <el-form-item prop="memberCategory" label="人员类别">
            <el-select style="width:190px" v-model="addMemberModule.memberCategory" placeholder="请选择人员类别">
              <el-option
                v-for="item in memberCategory"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="idNumber" label="身份证号">
            <el-input v-model="addMemberModule.idNumber" placeholder="请填写身份证号"></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="手机号">
            <el-input v-model="addMemberModule.phone" placeholder="请填写手机号"></el-input>
          </el-form-item>
          <el-form-item label="毕业院校">
            <el-input v-model="addMemberModule.graduateSchool" placeholder="请填写毕业院校"></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="addMemberModule.speciaity" placeholder="请填写专业"></el-input>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="addMemberModule.education" placeholder="请填写学历"></el-input>
          </el-form-item>
          <el-form-item label="毕业日期">
            <el-date-picker
              style="width:190px"
              v-model="addMemberModule.graduateDate"
              type="date"
              placeholder="请选择毕业日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="technicalTitles" label="技术职称">
            <el-select style="width:190px" v-model="addMemberModule.technicalTitles" placeholder="请选择技术职称">
              <el-option
                v-for="item in technicalTitles"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="currentPosition" label="现任岗位">
            <el-select style="width:190px" v-model="addMemberModule.currentPosition" placeholder="请选择现任岗位">
              <el-option
                v-for="item in currentPosition"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职务等级">
            <el-input v-model="addMemberModule.dutyGrades" placeholder="请填写职务等级"></el-input>
          </el-form-item>
          <el-form-item label="入职日期">
            <el-date-picker
              style="width:190px"
              v-model="addMemberModule.entryTime"
              type="date"
              placeholder="请选择入职日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="mountGuard" label="上岗形式">
            <el-select style="width:190px" v-model="addMemberModule.mountGuard" placeholder="请选择上岗形式">
              <el-option
                v-for="item in mountGuard"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="checkIn" label="加入考勤">
            <el-radio-group v-model="addMemberModule.checkIn" style="width:190px">
              <el-radio :label="'0'">否</el-radio>
              <el-radio :label="'1'">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="addMemberModule.remark" placeholder="请填写备注"></el-input>
          </el-form-item>
          
        </el-form>
      </div>
    </sys-dialog>

    <!-- 上级部门弹框 -->
    <sys-dialog
      :title="parentDialog.title"
      :width="parentDialog.width"
      :height="parentDialog.height"
      :visible="parentDialog.visible"
      @onClose="onParentClose"
      @onConfirm="onParentConfirm"
    >
      <div slot="content">
        <el-tree
          ref="parentTree"
          :data="parentList"
          default-expand-all
          node-key="id"
          :props="parentProps"
          :show-checkbox="false"
          :highlight-current="true"
          :expand-on-click-node="false"
          @node-click="parentClick"
        >
          <div class="customer-tree-node" slot-scope="{ node, data }">
            <!-- 长度为0说明没有下级 -->
            <span v-if="data.children.length == 0">
              <i
                class="el-icon-document"
                style="color: #8c8c8c; font-size: 20px"
              />
            </span>
            <span v-else @click.stop="openParentBtn(data)">
              <svg-icon
                style="font-size: 25px"
                v-if="data.open"
                icon-class="add-s"
              />
              <svg-icon style="font-size: 20px" v-else icon-class="sub-s" />
            </span>
            <span>{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </sys-dialog>
  </el-main>
</template>

<script>
import SysDialog from "@/components/system/SysDialog";
import leafUtils from "@/utils/leafUtils";
import { getDeptListApi } from "@/api/department";
import {
  getMemberListApi,
  addMemberApi,
  editMemberApi,
  deleteMemberApi,
  getMemberByIdApi
} from "@/api/member";
export default {
  components: {
    SysDialog,
  },
  data() {
    return {
      check:['姓名','性别','部门','出生日期','人员类别','身份证号','手机号','毕业院校','专业','学历','毕业日期',
      '技术职称','现任岗位','职务等级','入职日期','上岗形式','是否加入考勤','创建时间','备注'],
        checkList:['姓名','性别','部门','出生日期','人员类别','身份证号','手机号','毕业院校','专业','学历',
        '毕业日期','技术职称','现任岗位','职务等级','入职日期','上岗形式','是否加入考勤','创建时间','备注'],
        lists:[
          {label:'姓名',prop:'name',ispass:true},
          {label:'性别',prop:'sex',ispass:true},
          {label:'部门',prop:'deptName',ispass:true},
          {label:'出生日期',prop:'birthday',ispass:true},
          {label:'人员类别',prop:'memberCategoryName',ispass:true},
          {label:'身份证号',prop:'idNumber',ispass:true},
          {label:'手机号',prop:'phone',ispass:true},
          {label:'毕业院校',prop:'graduateSchool',ispass:true},
          {label:'专业',prop:'speciaity',ispass:true},
          {label:'学历',prop:'education',ispass:true},
          {label:'毕业日期',prop:'graduateDate',ispass:true},
          {label:'技术职称',prop:'technicalTitlesName',ispass:true},
          {label:'现任岗位',prop:'currentPositionName',ispass:true},
          {label:'职务等级',prop:'dutyGrades',ispass:true},
          {label:'入职日期',prop:'entryTime',ispass:true},
          {label:'上岗形式',prop:'mountGuardName',ispass:true},
          {label:'是否加入考勤',prop:'checkIn',ispass:true},
          {label:'创建时间',prop:'createTime',ispass:true},
          {label:'备注',prop:'remark',ispass:true},
      ],
      memberCategory: [{
          value: 1,
          label: '聘用人员'
        }, {
          value: 2,
          label: '干部'
        }],
        technicalTitles: [{
          value: 1,
          label: '高级会计师'
        }, {
          value: 2,
          label: '会计师'
        }],
        currentPosition: [{
          value: 1,
          label: '财务负责人'
        }, {
          value: 2,
          label: '主管会计'
        }],
        mountGuard: [{
          value: 1,
          label: '招聘'
        }, {
          value: 2,
          label: '外派'
        }],
      //树属性配置
      defaultProps: {
        children: "children",
        label: "label",
      },
      //表单验证
      rules: {
        name: [{required: true,trigger: "change",message: "请填写姓名",},],
        sex: [{required: true,trigger: "change",message: "请填写性别",},],
        dept: [{required: true,trigger: "change",message: "请填写部门",},],
        memberCategory: [{required: true,trigger: "change",message: "人员类别",},],
        idNumber: [{required: true,trigger: "change",message: "请填写身份证号",},],
        phone: [{required: true,trigger: "change",message: "请填写手机号",},],
        currentPosition: [{required: true,trigger: "change",message: "请填写现任岗位",},],
        entryTime: [{required: true,trigger: "change",message: "请填写入职日期",},],
        mountGuard: [{required: true,trigger: "change",message: "请填写上岗形式",},],
        checkIn: [{required: true,trigger: "change",message: "请选择是否考勤",},],
      },
      //新增或编辑表单数据域
      addMemberModule: {
        id: "", //编辑时候使用
        name: "", //标识新增或编辑  0：新增 1：编辑
        sex: "",
        dept: "",
        deptName: "",
        birthday: "",
        memberCategory: "",
        memberCategoryName: "",
        idNumber: "",
        phone: "",
        graduateSchool: "",
        speciaity: "",
        education: "",
        graduateDate: "",
        technicalTitles: "",
        technicalTitlesName: "",
        currentPosition: "",
        currentPositionName: "",
        dutyGrades: "",
        entryTime: "",
        mountGuard: "",
        mountGuardName: "",
        checkIn: "",
        remark: "",
        editType: "",
      },

      //新增或编辑弹框属性
      addDialog: {
        title: "",
        height: 500,
        width: 650,
        visible: false,
      },
      //表格高度
      tableHeight: 0,
      //人员列表数据
      memberList: [],
      //查询参数
      parms: {
        currentPage: 1, //当前是第几页
        pageSize: 10, //每页查询条数
        userId: this.$store.getters.userId,
        total: 0,
        name: "",
      },
      //上级部门点击数据
      selectParentNode: {
        id: "",
        name: "",
      },
      //上级树属性绑定
      parentProps: {
        children: "children",
        label: "name",
      },
      //上级部门弹框属性
      parentDialog: {
        title: "选择上级部门",
        width: 300,
        height: 450,
        visible: false,
      },
      //上级部门数据域
      parentList: [],
    };
  },
  created() {
    this.getMemberList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 210;
    });
  },
  watch: {
    check(newVal){
      if (newVal) {
        var arr = this.checkList.filter(i => newVal.indexOf(i) < 0) //未选中
          this.lists.map(i => {
            if (arr.indexOf(i.label) !== -1) {
              i.ispass = false
            } else {
              i.ispass = true
            }
          })
        }
      }
  },
  methods: {
    dcMember(){
      this.$message.success("功能尚未开放！");
    },
    drMember(){
      this.$message.success("功能尚未开放！");
    },
    //树的节点点击事件
    handleNodeClick(data) {
      console.log(data);
    },
    //新增或编辑关闭事件
    onClose() {
      this.addDialog.visible = false;
    },
    //新增或编辑确认事件
    onConfirm() {
      this.$refs.addMemberForm.validate(async (valid) => {
        if (valid) {
        console.log("============================")
        console.log(this.addMemberModule)
          let res = null;
          if (this.addMemberModule.editType == "0") {
            console.log("新增")
            //新增
            res = await addMemberApi(this.addMemberModule);
          } else {
            console.log("修改")
            res = await editMemberApi(this.addMemberModule);
          }
          if (res && res.code == 200) {
            //刷新列表
            this.getMemberList(this.parms);
            this.$message.success(res.msg);
            this.addDialog.visible = false;
          }
        }
      });
    },
    //新增按钮
    addMember() {
      //清空表单数据
      this.$resetForm("addMemberForm", this.addMemberModule);
      this.addMemberModule.editType = "0";
      this.addMemberModule.sex = "0";
      this.addMemberModule.checkIn = "0";
      //设置弹框属性
      this.addDialog.title = "新增人员";
      this.addDialog.visible = true;
    },
    //取消按钮
    cacelList() {
      this.parms.currentPage = 1;
      this.parms.name = "";
      this.getMemberList(this.parms);
    },
    //查询按钮
    searchList() {
      this.parms.currentPage = 1;
       this.parms.pageSize = 10;
      this.getMemberList(this.parms);
    },
    currentChange(currentPage) {
      this.parms.currentPage = currentPage;
      this.getMemberList(this.parms);
    },
    sizeChange(size) {
      this.parms.pageSize = size;
      this.getMemberList(this.parms);
    },
    //删除按钮
    async deleteMember(row) {
      console.log(row);
      let confrim = await this.$myconfirm("确定删除该数据吗？");
      if (confrim) {
        let parm = {
          id: row.id,
        };
        let res = await deleteMemberApi(parm);
        if (res && res.code == 200) {
          //刷新列表
          this.getMemberList(this.parms);
          this.$message.success(res.msg);
        }
      }
    },
    //编辑按钮
    editMember(row) {
      console.log(row)
      //清空表单
      this.$resetForm("addMemberForm", this.addMemberModule);
      //设置弹框属性
      this.addDialog.title = "编辑人员信息";
      this.addDialog.visible = true;
      //标识 编辑
      this.addMemberModule.editType = "1";
      //把当前点击的行数据复制到表单数据域
      this.$objCoppy(row, this.addMemberModule);
      console.log(row);
    },
    //获取人员列表
    async getMemberList() {
      let res = await getMemberListApi(this.parms);
      if (res && res.code == 200) {
        this.memberList = res.data;
        this.parms.total = res.total;
      }
    },
    //上级部门树加号 减号 图标点击事件
    openParentBtn(data) {
      data.open = !data.open;
      this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open;
    },
    //上级部门树节点点击事件
    parentClick(data) {
      console.log(data);
      this.selectParentNode.id = data.id;
      this.selectParentNode.name = data.name;
    },
    //选择上级部门确认事件
    onParentConfirm() {
      this.addMemberModule.dept = this.selectParentNode.id;
      this.addMemberModule.deptName = this.selectParentNode.name;
      this.parentDialog.visible = false;
    },
    //选择上级部门取消事件
    onParentClose() {
      this.parentDialog.visible = false;
    },
    //选择上级部门
    async selectDept() {
      //查询上级部门数据
      let res = await getDeptListApi();
      if (res && res.code == 200) {
        this.parentList = res.data;
      }
      //设置弹框属性
      this.parentDialog.visible = true;
    },
     handleClick() {
        alert('button click');
    },
  },
};
</script>

<style lang="scss" scoped>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>